import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import './index.less';

export default class Avatar extends React.Component {
    static defaultProps = {
        shape: 'square',
        size: 'default',
        src: null,
        className: '',
        children: null,
        decoration: null,
        alt: '',
        onError: null,
        decorationClassName: '',
        imgClassName: '',
    };

    static propTypes = {
        shape: PropTypes.oneOf(['circle', 'square']),
        size: PropTypes.oneOf(['large', 'small', 'default']),
        src: PropTypes.string,
        className: PropTypes.string,
        imgClassName: PropTypes.string,
        decorationClassName: PropTypes.string,
        children: PropTypes.node,
        decoration: PropTypes.oneOfType(PropTypes.node, PropTypes.string),
        alt: PropTypes.string,
        onError: PropTypes.func,
    };

    state = {
        isImgExist: true,
    };

    componentDidUpdate(prevProps) {
        if (prevProps.src !== this.props.src) {
            // eslint-disable-next-line react/no-did-update-set-state
            this.setState({ isImgExist: true });
        }
    }

    handleImgLoadError = () => {
        const { onError } = this.props;
        const errorFlag = onError ? onError() : undefined;
        if (errorFlag !== false) {
            this.setState({ isImgExist: false });
        }
    };

    getPrefixCls = (type) => `no_merge_wptd-${type}`;

    renderAvatar = () => {
        const {
            shape,
            size,
            src,
            className,
            alt,
            decoration,
            decorationClassName,
            imgClassName,
            ...others
        } = this.props;

        const { isImgExist } = this.state;

        const prefixCls = this.getPrefixCls('avatar');

        const decorationString = classNames(decorationClassName, {
            [`${prefixCls}-decoration`]: decoration,
        });
        const decorationStringNode = typeof decoration === 'string' ? (
            <img src={decoration}/>
        ) : decoration;


        const sizeCls = classNames({
            [`${prefixCls}-lg`]: size === 'large',
            [`${prefixCls}-sm`]: size === 'small',
        });

        let classString = '';
        let imgString = '';
        let decorationWrap = '';
        if (decoration) {
            classString = classNames(prefixCls, sizeCls, imgClassName, {
                [`${prefixCls}-${shape}`]: shape,
            });

            imgString = classNames({
                [`${prefixCls}-image`]: src && isImgExist,

            });
            decorationWrap = classNames(className, {

                [`${prefixCls}-wrap`]: true,
            });
        } else {
            classString = classNames(prefixCls, className, sizeCls, imgClassName, {
                [`${prefixCls}-${shape}`]: shape,
            });

            imgString = classNames({
                [`${prefixCls}-image`]: src && isImgExist,

            });
        }

        const { children } = this.props;
        let img = '';
        if (src && isImgExist) {
            img = <img src={src} className={imgString} onError={this.handleImgLoadError} alt={alt}/>;
        }

        if (decoration) {
            return (

                <span className={decorationWrap}>
                    <span
                        {...others}
                        className={classString}
                    >

                        {img}
                        {children}
                    </span>

                    <span className={decorationString}>
                        {decorationStringNode}
                    </span>
                </span>

            );
        }
        return (

            <span
                {...others}
                style={{ ...others.style }}
                className={classString}
            >
                {img}
                {children}
            </span>
        );
    };

    render() {
        return this.renderAvatar();
    }
}
